<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }
        .start{
            width: 100px;
            height: 30px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            background-color: aquamarine;
            color: #fff;
        }
        .pause{
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <button class="start">开始</button>
    <script>
        let one = document.querySelector(".one");
        one.onclick=()=>{
            one.style.backgroundColor="blue";
        }
        let btn=document.querySelector(".start");
        let flag=true;
        btn.onclick=()=>{
            btn.classList.toggle("pause");
            if(flag){
                btn.innerHTML="暂停";
            }else{
                btn.innerHTML="开始";
            }
            flag=!flag;
        }
    </script>
</body>
</html>